import 'package:flutter/material.dart';
import 'package:fsharing/core/models/account_detail.dart';
import 'package:fsharing/core/viewmodels/pages/mine/account_detail_model.dart';
import 'package:fsharing/core/viewmodels/view_model.dart';
import 'package:fsharing/main.dart';
import 'package:fsharing/ui/widgets/background_container.dart';
import 'package:fsharing/ui/widgets/round_back_button.dart';
import 'package:provider/provider.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class AccountDetailPage extends StatelessWidget {
  final int id;

  AccountDetailPage({
    Key key,
    @required this.id,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => AccountDetailModel(Provider.of(context, listen: false), id),
      child: BackgroundContainer(
        child: Scaffold(
          appBar: AppBar(
            leading: RoundBackButton(),
            title: Text('账户详情'),
          ),
          body: Consumer<AccountDetailModel>(
            builder: (context, model, child) {
              switch (model.viewState) {
                case ViewState.busy:
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                case ViewState.error:
                  return Center(
                    child: Text(model.errorMessage),
                  );
                case ViewState.success:
                  return _SuccessWidget(
                    list: model.list,
                    pageList: model.pageList,
                  );
                default:
                  return Container();
              }
            },
          ),
        ),
      ),
    );
  }
}

class _SuccessWidget extends StatelessWidget {
  final RefreshController _refreshController = RefreshController();
  final List<AccountDetail> list;
  final List<AccountDetail> pageList;

  _SuccessWidget({
    Key key,
    @required this.list,
    @required this.pageList,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 12),
      child: Theme(
        data: lightTheme(),
        child: Material(
          child: SmartRefresher(
              controller: _refreshController,
              child: ListView.separated(
                itemBuilder: (context, index) {
                  return _ListItemWidget(
                    accountDetail: list[index],
                    isLast: index == list.length - 1,
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider(
                    height: 8,
                    thickness: 1,
                    indent: 12,
                    endIndent: 12,
                  );
                },
                itemCount: list.length,
              ),
              enablePullDown: false,
              enablePullUp: pageList.length == 10,
              onLoading: () => _onLoadData(context)),
        ),
      ),
    );
  }

  void _onLoadData(BuildContext context) async {
    AccountDetailModel model = Provider.of(context, listen: false);
    await model.loadData();
    _refreshController.loadComplete();
  }
}

class _ListItemWidget extends StatelessWidget {
  final AccountDetail accountDetail;
  final bool isLast;

  const _ListItemWidget({
    Key key,
    @required this.accountDetail,
    @required this.isLast,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      '${accountDetail.operationTypeName}',
                      style: TextStyle(fontSize: 14),
                    ),
                    SizedBox(
                      height: 4,
                    ),
                    Text(
                      '账户类型：${accountDetail.accountTypeName}',
                      style: TextStyle(fontSize: 14),
                    ),
                  ],
                ),
              ),
              Text(
                '${accountDetail.amount}',
                style: TextStyle(color: Theme.of(context).accentColor, fontSize: 20),
              )
            ],
          ),
          SizedBox(height: 8),
          Row(
            children: <Widget>[
              Expanded(
                child: Text(
                  accountDetail.description,
                  style: TextStyle(color: Colors.grey, fontSize: 12),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              SizedBox(width: 4),
              Text(
                accountDetail.createTime,
                style: TextStyle(color: Colors.grey, fontSize: 12),
              )
            ],
          ),
        ],
      ),
    );
  }
}
